<template>
  <div class="continuaBox">
    <el-table ref="tableRef" :height="tableHeight" :data="tableData">
      <el-table-column prop="date" label="Date" width="180"/>
      <el-table-column prop="name" label="Name" width="180"/>
      <el-table-column prop="address" label="Address">
        <template #default="{row}">
          <div style="background-color: rosybrown;width: 60px;height: 60px"></div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template #default="{row}">
          <button @click="onClick">操作</button>
        </template>
      </el-table-column>
    </el-table>
    <Pager :total="overviewData.total" :pageSizes="overviewData.pageSizes"
           :limit="overviewData.limit" @current-change="onCurrentChange"
           @size-change="onSizeChange" :page="overviewData.page">
    </Pager>
  </div>
</template>

<script lang="ts" setup>
import Pager from '@/components/pagination/index.vue'
import {calcTableHeight} from '@/utils/index.js'
import {reactive, ref} from "vue";

const {tableRef, tableHeight} = calcTableHeight()
const overviewData = reactive({
  total: 100,
  pageSizes: [20, 50, 100],
  limit: 10,
  page: 1
})
const tableData = ref([])

for (let item = 0; item < 100; item++) {
  tableData.value.push({
    date: `item${item}`,
    name: item,
    address: `No. ${item}, Grove St, Los Angeles`,
  })
}
// 当前页码变化
const onCurrentChange = (val) => {
  overviewData.page = val
}

// 每页显示条数变化
const onSizeChange = (val) => {
  overviewData.limit = val
}
const onClick = () => {
  tableData.value = [];
}
</script>
<style lang="less">
.continuaBox {
  height: 100%;
}
</style>